<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">租房用户</el-menu-item>
      <el-menu-item index="2">房东用户</el-menu-item>
      <el-menu-item index="3">管理员用户</el-menu-item>
    </el-menu>

    <el-main>
      <!--租房用户表-->
      <div v-if="activeIndex === '1'">
        <el-table :data="tableData" stripe="true">
          <el-table-column type="index" label="序号" min-width="60" align="center"/>
          <el-table-column prop="username" label="用户名" min-width="190" align="center"/>
          <el-table-column prop="password" label="用户密码" min-width="190" align="center"/>
          <el-table-column prop="createTime" label="注册时间" min-width="190" align="center"/>
          <el-table-column prop="detail" label="交易记录" min-width="190" align="center">
            <div style="display: flex; align-items: center; margin-left: 60px;">
              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <el-button style="margin-right: 16px">查看动态</el-button>
                </template>
                <el-table :data="gridData1">
                  <el-table-column min-width="150" property="transactionDate" label="交易日期"/>
                  <el-table-column min-width="170" property="transactionAmount" label="交易金额"/>
                  <el-table-column min-width="100" property="state" label="租房状态"/>
                </el-table>
              </el-popover>
            </div>
          </el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template #default="scope">
              <el-button type="success" @click="update()">编辑</el-button>
              <el-button type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--房东用户表-->
      <div v-if="activeIndex === '2'">
        <el-table :data="tableData" stripe="true">
          <el-table-column type="index" label="序号" min-width="60" align="center"/>
          <el-table-column prop="username" label="用户名" min-width="190" align="center"/>
          <el-table-column prop="password" label="用户密码" min-width="190" align="center"/>
          <el-table-column prop="createTime" label="注册时间" min-width="190" align="center"/>
          <el-table-column prop="houseDetail" label="房屋信息" min-width="190" align="center">
            <div style="display: flex; align-items: center; margin-left: 60px;">
              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <el-button style="margin-right: 16px">查看详情</el-button>
                </template>
                <el-table :data="gridData2">
                  <el-table-column min-width="150" property="houseInfo" label="房屋详情"/>
                  <el-table-column min-width="100" property="state" label="房屋状态"/>
                </el-table>
              </el-popover>
            </div>
          </el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template #default="scope">
              <el-button type="success" @click="update()">编辑</el-button>
              <el-button type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--管理员用户表-->
      <div v-if="activeIndex === '3'">

          <!--添加管理员按钮-->
          <el-button @click="dialogVisible=true" style="background-color: orange;color: white;width: 100%;height: 30px;">
            添加管理员
          </el-button>
          <el-dialog title="添加管理员" v-model="dialogVisible">
            <el-form label-width="100px">
              <el-form-item label="管理员用户名:">
                <el-input v-model="administratorName" placeholder="请输入管理员姓名"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码">
                <el-input v-model="administratorPassword" placeholder="请输入管理员密码" ></el-input>
              </el-form-item>
              <el-form-item label="注册时间:">
                <el-input v-model="RegDate" placeholder="注册时间" ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" style="width:100%;" @click="add()">添加</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        <el-table :data="tableData" stripe="true">
          <el-table-column type="index" label="序号" min-width="60" align="center"/>
          <el-table-column prop="username" label="用户名" min-width="190" align="center"/>
          <el-table-column prop="password" label="用户密码" min-width="190" align="center"/>
          <el-table-column prop="createTime" label="注册时间" min-width="190" align="center"/>
          <el-table-column label="操作" width="190" align="center">
            <template #default="scope">
              <el-button type="success" @click="update()">编辑</el-button>
              <el-button type="danger" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </div>
  <el-pagination el-pagination background layout="prev, pager, next" :total="1000" style="width: 1200px;"></el-pagination>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from "element-plus";

//控制添加用户弹窗是否出现，默认false
const dialogVisible=ref(false);

//绑定添加管理员按钮
const  add=()=> {
  dialogVisible.value = false;/*点击添加后，让添加导航框消失*/
  ElMessage.success('假装添加成功');
};

//编辑信息按钮
const update = () => {
  ElMessage.success("后续跳转到个人详情页");

}

//删除用户信息按钮
const del = () => {
  ElMessage.success("假装已删除用户");
}

//查看用户详情按钮
const detail = () => {
  ElMessage.success("后续跳转到用户动态界面");
}


const tableData = ref([
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",},
  {username: "lele", password: "000", createTime: "2024/4/10",}
]);


const gridData1 = [
  {
    transactionDate: '2024/4/10',
    transactionAmount: '50000',
    state: '1',
  }, {
    transactionDate: '2024/4/10',
    transactionAmount: '50000',
    state: '1',
  }, {
    transactionDate: '2024/4/10',
    transactionAmount: '50000',
    state: '1',
  }, {
    transactionDate: '2024/4/10',
    transactionAmount: '50000',
    state: '1',
  }, {
    transactionDate: '2024/4/10',
    transactionAmount: '50000',
    state: '1',
  },
];

const gridData2 = [
  {
    houseInfo: '中关村大街',
    state: '1',
  }, {
    houseInfo: '中关村大街',
    state: '1',
  }, {
    houseInfo: '中关村大街',
    state: '1',
  }, {
    houseInfo: '中关村大街',
    state: '1',
  }, {
    houseInfo: '中关村大街',
    state: '1',
  }
]
const activeIndex = ref('1');

const handleSelect = (index) => {
  activeIndex.value = index;
};

</script>

<style scoped>

</style>